<template>
	<view class="order-list">
		<uv-tabs :list="list" lineColor="#F5AB4E" :current="orderType" :activeStyle="{color:'#F5AB4E'}"
			@click="changeTab"></uv-tabs>
		<view v-if="!showLoading">
			<view v-if="orderList.length>0" style="background-color: #f7f7f7;">

				<view class="order-list-content">
					<view v-for="(item,index) in orderList" :key="index" class="order-list-content-item"
						@click="toDetail(item)">
						<view>
							<view class="order-list-content-item-top u-flex u-p-b-18 ">
								<view class="col-222 flex-row">
									<view class=" f-w-600 u-line-1" style="line-height: 40rpx;width:400rpx">
										订单号：{{item.orderNumber}}
									</view>
								</view>
							</view>
							<view class="order-list-content-item-main u-p-t-22">
								<view v-for="(good,idx) in item.orderItems" :key="idx"
									class="u-flex u-m-b-20 order-list-content-item-main-item">
									<view class="" style="display: flex;">
										<u-image radius='4' :fade="false"
											:src="good.phoneMainMediaPath||'/packageB/static/images/goods.png'"
											width="96rpx" height="96rpx">
										</u-image>
										<view class="u-p-l-18"
											style="display: flex;flex-direction: column;justify-content: space-between;height: 94rpx;">
											<view class="col-222 u-font-30 u-p-b-12 f-w-600">{{good.prodName}}</view>
											<view class="col-555 u-font-26">{{good.visitDate}}</view>
										</view>
									</view>
									<view class="align-right">
										<view class="col-222 u-font-30 u-p-b-16 ">￥{{good.price}}</view>
										<view class="col-666 u-font-26">X {{good.prodCount}}</view>
									</view>
								</view>

							</view>
							<view class="order-list-content-item-bottom">
								<view class="u-flex order-list-content-item-bottom-top u-p-t-18">
									<view>
										共{{item.productNums}}件
									</view>
									<view class="u-m-l-24">小计：</view>
									<view style="color: #D81720;font-weight: 600;">
										￥{{item.actualTotal}}
									</view>
								</view>
								<view class="order-list-content-item-bottom-bottom u-p-t-20">
									<view class="u-m-r-12" v-if="item.isShowCancelButton==1" @click.stop>
										<u-button text="取消订单" @click.stop="open(2,item)" type="info" plain size="mini">
										</u-button>
									</view>
									<view class="" v-if="item.isShowPayButton==1" @click.stop>
										<u-button text="去付款" @click.stop="open(3,item)" type="warning" size="mini">
										</u-button>
									</view>
									<view class="" v-if="item.isShowRefundButton==1" @click.stop>
										<u-button text="退订" type="info" plain size="mini" @click.stop="open(1,item)">
										</u-button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore v-if="status=='loadmore'" :status="status" loading-text="加载更多" @loadmore="loadMore"
					marginBottom="30" />

				<u-modal :show="show" @confirm="confirm" :zoom="false" title="温馨提示" ref="uModal" confirm-color="#178975"
					:asyncClose="true" :show-cancel-button="true" :content="content" @cancel="show=false"></u-modal>
				<MyLoading :loading="loading" height="100vh"></MyLoading>
				<u-popup v-model="showSelectReason" mode="bottom" length="70%">
					<view class="popup-box">
						<view class="top-title">退订原因</view>
						<scroll-view style="height: 600rpx;" :scroll-y="true">
							<view class="radio-list">
								<view class="radio-list-box">
									<u-radio-group v-model="value" :wrap="true" active-color="#178975">
										<view class="radio-list-item" v-for="(item,index) in returnReasonList"
											:key="index">
											<view>{{item.codeValue}}</view>
											<u-radio :name="item.codeId"></u-radio>
										</view>
									</u-radio-group>
								</view>

							</view>
						</scroll-view>

						<view class="button-box">
							<button @click.prevent="returnOrderSubmit">申请退订</button>
						</view>
					</view>
				</u-popup>
			</view>
			<view v-else>
				<u-empty marginTop="200px"></u-empty>
			</view>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	// import creatPaymentMixin from "@/pages/payment/create-payment-mixin.js"
	// import checkIsPayMixin from "@/pages/payment/check-is-pay-mixin.js"

	import {
		getUserInfo
	} from "@/utils/storage.js"
	import {
		getWechatOrderIfoByUser
	} from "@/api/order/index.js";
	export default {
		// mixins: [creatPaymentMixin, checkIsPayMixin],

		data() {
			return {
				showLoading: true,
				list: [{
					index: 0,
					name: '全部',
				}, {
					name: '待付款',
				}, {
					name: '待收货',
				}, {
					name: '待使用'
				}, {
					name: '待退订'
				}],
				orderType: 0,
				returnReasonList: [],
				returnReasonCode: "",
				showSelectReason: false,
				orderDetailList: [],
				item: null, //取消订单还是退单传递的参数
				type: 1, //区分取消订单(1)还是退单(2)
				content: '是否确定执行此操作？',
				show: false,
				src: '',
				status: 'nomore',
				ticketIconUrl: 'http://sdzn-dev.oss-cn-shanghai.aliyuncs.com/uuid1-40-uuid2d2a799cb-8ac6-4d08-8ee7-3bbfa80c7aaa.png?Expires=1997177204&OSSAccessKeyId=LTAI4GCyeQcqZBBPm718W62a&Signature=0SxpIbnzGwTWZFZmUmKEyD2YDxg%3D',
				goodsIconUrl: 'http://sdzn-dev.oss-cn-shanghai.aliyuncs.com/uuid1-40-uuid2cd2198eb-0374-4d5a-896a-ac3d744bd02c.png?Expires=1997177078&OSSAccessKeyId=LTAI4GCyeQcqZBBPm718W62a&Signature=mwzGJDO9CfJnBoyA6krArezyczk%3D',
				foodIconUrl: 'http://47.100.131.137:9000/sdzn-test/99c1ec3c0fa742f49e5f39af665e67ad.png',
				hotelIconUrl: 'http://sdzn-dev.oss-cn-shanghai.aliyuncs.com/uuid1-40-uuid2bf3b37d4-6e3a-486b-a56b-43f5c875f3c8.png?Expires=1997177175&OSSAccessKeyId=LTAI4GCyeQcqZBBPm718W62a&Signature=OTEZpcjQoO5XkMF5xTrFsEg%2FNuk%3D',
				combineProductIconUrl: 'http://47.100.131.137:9000/sdzn-test/6c23652551944b68a1081d2665283236.png',
				goodsList: [],
				//1,门票 2,酒店 3,商品 4,餐饮
				orderList: [],
				current: 0,
				memberId: null,

				pageSize: 10,
				pageNum: 1,
				orderTypeName: '',
			}
		},
		onLoad(option) {
			this.showLoading = true

			this.current = option.orderType
			// this.memberId = getUserInfo().memberId
			this.orderList = []
		},
		onShow() {
			this.showLoading = true

			this.updateList(1)
		},
		onReachBottom() {
			this.loadMore()
		},

		methods: {
			changeTab(item) {
				this.showLoading = true
				this.orderType = item.index
				this.orderList = []
				this.updateList()
			},
			loadMore() {
				console.log("加载更多")
				if (this.status == 'nomore') return
				this.updateList()
			},
			initData() {
				this.orderList = this.$options.data().orderList
				this.pageNum = this.$options.data().pageNum
				this.pageSize = this.$options.data().pageSize
			},
			updateList(type) {
				this.status = 'loading';
				if (type == 1) {
					this.initData()
				} else {
					this.pageNum = ++this.pageNum;
				}
				// {
				// 	pageNum: this.pageNum,
				// 	pageSize: this.pageSize,
				// }
				getWechatOrderIfoByUser().then(res => {
					if (res.data && res.data.records && res.data.records.length > 0) {
						if (type == 1) {
							this.orderList = uni.$uv.deepClone(res.data.records)
						} else {
							let orderList = uni.$uv.deepClone(this.orderList)
							this.orderList = orderList.concat(res.data.records)
						}
						if (this.pageNum < res.data.pages) {
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
					} else {
						this.orderList = []
						this.status = 'nomore'
					}
				}).finally(() => {
					this.showLoading = false
				})
			},
			//跳转到订单详情页面
			toDetail(data) {
				console.log(data.type)
				if (data.productType == 1 || data.productType == 8) { //门票
					uni.navigateTo({
						url: '/packageB/pages/ticket-order/order-detail/index?id=' + data.orderNo + '&type=' + data
							.productType
					})
				}
				if (data.scenicSpotType == 2) {
					uni.navigateTo({
						url: '/packageB/pages/food-order/order-detail/index?id=' + data.orderNo
					})
				}
				if (data.scenicSpotType == 3) {
					uni.navigateTo({
						url: '/packageB/pages/goods-order/order-detail/index?id=' + data.orderNo
					})
				}
				if (data.productType == 10) {
					uni.navigateTo({
						url: '/packageB/pages/hotel-order/order-detail/index?id=' + data.orderNo
					})
				}
			},
			change(index) {
				this.current = index;
			},

			open(type, item) {
				console.log("退订", type, item)

				if (item.productType == 1) {
					this.orderTypeName = 'onlineTicket'
				}
				if (item.productType == 3) {
					this.orderTypeName = 'onlineGood'
				}
				if (item.productType == 4) {
					this.orderTypeName = 'onlineFood'
				}
				if (item.productType == 10) {
					this.orderTypeName = 'onlineHotel'
				}
				this.type = type;
				this.show = true;
				this.item = item
				if (type == 1) {
					this.content = "您确认要退订吗？"
				} else if (type == 2) {
					this.content = "您确认要取消订单吗？"

				} else if (type == 3) {
					this.content = "您确认要立即付款吗？"
				}
			},
			confirm() {
				if (this.type == 1) {
					this.returnOrder()
				} else if (this.type == 2) {
					this.cancel()
				} else if (this.type == 3) {
					this.payment()
				}
			},
			cancel() {
				orderAutoCancelGzh({
					orderNo: this.item.orderNo
				}).then(res => {
					this.$refs.uToast.show({
						message: res.message,
						type: 'success',
					})
					this.orderList = []
					this.pageParams.page = 1
					this.getOrderIfoPage()
				}).finally(err => {
					this.show = false
				})
			},
			//退订
			returnOrder() {
				console.log("this.item", this.item)
				this.findOrderRefundReason(this.item.orderDetailResults[0].productId)
			},
			//查询订单退订原因
			findOrderRefundReason(id) {
				findOrderRefundReason({
					orderNo: this.item.orderNo,
					productId: id
				}).then(res => {
					if (res.data.length > 0) {
						this.returnReasonList = res.data
						this.showSelectReason = true
					} else {
						this.showSelectReason = false
						refundGzhOrderInfo({
							refundVoucher: this.item.orderNo,
							returnReasonCodeIdStr: "",
						}).then(res => {
							// this.show = false
							this.$refs.uToast.show({
								message: res.message,
								type: 'success',
							})
							this.pageParams.page = 1
							this.orderList = []
							this.getOrderIfoPage(1)
						}).finally(err => {
							this.show = false;
						})
					}
				})
			},
			payment() {
				this.orderNo = this.item.orderNo
				// this.buttonLoading = true
				this.createPayment({
					success: () => {
						this.checkOrderIsPay({
							complete: () => {
								this.isCanGo = true
							},
							success: () => {
								this.isCanGo = true
								this.show = false
							},
						})
					},
					complete: () => {
						this.isCanGo = true
						this.show = false
					},
					typeName: this.orderTypeName,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f7f7f7;
	}

	.flex-row {
		display: flex;
		align-items: center;
	}

	.col-222 {
		color: #222222;
	}

	.f-w-600 {
		font-weight: 600 !important;
	}

	.col-ff4 {
		color: #E11B1B;
	}

	.col-d81 {
		color: #D81720;
	}

	.col-9e9 {
		color: #9E9E9F;
	}

	.col-555 {
		color: #555555;
	}

	.col-666 {
		color: #666666;
	}

	.align-right {
		text-align: right;
	}

	.order-list {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100%;
		background-color: #F7F7F7;

		.order-list-content {
			width: 100%;
			flex: 1;
			background: #F7F7F7;
			padding: 28rpx 32rpx 0;

			.order-list-content-item {
				width: 100%;
				background-color: #fff;
				// padding: 24rpx 44rpx;
				margin-bottom: 20rpx;
				border-radius: 16rpx;

				.order-list-content-item-top {
					background: rgba(245, 171, 78, 0.1);
					padding: 24rpx 44rpx;
					justify-content: space-between;
					border-top-left-radius: 16rpx;
					border-top-right-radius: 16rpx;
				}

				.order-list-content-item-main {
					padding: 24rpx 0 0;
					margin: 0rpx 44rpx;
					// width: 100%;
					justify-content: space-between;
					border-bottom: 1rpx dashed #EAEAEA;

					.order-list-content-item-main-item {
						justify-content: space-between;
					}
				}

				.order-list-content-item-bottom {
					justify-content: flex-end;
					padding: 0rpx 44rpx 24rpx;

					.order-list-content-item-bottom-top {
						color: #000000;
						display: flex;
						justify-content: flex-end;
					}

					.order-list-content-item-bottom-bottom {
						display: flex;
						justify-content: flex-end;
					}
				}

			}
		}

	}

	.custom-btn1 {
		width: 148rpx;
		height: 56rpx;
		line-height: 56rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #ffffff;
		background: #43bcdb;
		border-radius: 32rpx;
		padding: 0;
		margin: 0;
		margin-left: 18rpx;
	}

	.custom-btn2 {
		margin: 0;

		padding: 0;
		width: 148rpx;
		height: 56rpx;
		line-height: 56rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #9E9E9F;
		background: #fff;
		border-radius: 32rpx;
		border: 2rpx solid #CFCFCF
	}

	.custom-btn::after {
		border-color: transparent;
	}

	::v-deep .u-tabs__wrapper__nav__item {
		flex: 1;
	}

	.scroll-list-wrap {
		display: flex;

		.scroll-list__show-more {
			background-color: #ffffff;
			// border-radius: 3px;
			padding: 22rpx 20rpx 0;
			align-items: center;

			&__text1 {
				font-size: 24rpx;
				// width: 12px;
				color: #666666;
				font-weight: 600;
				line-height: 34rpx;
			}

			&__text2 {
				font-size: 24rpx;
				color: #666666;
				line-height: 28rpx;
			}
		}

	}

	.scroll-list {

		&__goods-item {
			margin-right: 40rpx;

			&__image {
				width: 96rpx;
				height: 96rpx;
				border-radius: 8rpx;
			}

			&__text {
				width: 104rpx;
				color: #333333;
				text-align: center;
				font-size: 26rpx;
				// font-weight: 600;
				margin-top: 10rpx;
			}
		}

	}
</style>
